<template>
	<view class="wrap">
		<view class="top"></view>
		<view class="content">
			<!-- <view class="logo"> -->
			<!-- <img src="/static/images/reg-logo.png"> -->
			<!-- <img :src="shop.cover" style="max-width: 50vw;"> -->
			<!-- </view> -->
			<view>
				<view style="font-size: 2em; font-weight: bold">您好</view>
				<view style="font-size: 1.5em; line-height: 1.8; margin-bottom: 1em">欢迎使用多路片服务号</view>
			</view>

			<!-- <view class="title">会员登陆 <text style="font-size: .5em; padding:0 1em;">请用微信访问</text></view> -->
			<label class="u-border-bottom">
				<view class="tips">姓名</view>
				<input type="text" v-model="name" placeholder="姓名" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">手机号</view>
				<input type="number" v-model="mobile" placeholder="手机号" />
			</label>
			<label class="u-border-bottom">
				<view class="tips">验证码</view>
				<input style="flex: 1" type="text" v-model="sms_code" placeholder="验证码" />
				<view class="tips" @click="getSmsCode" style="text-align: right" :class="{ disabled: sending }">发送验证码</view>
			</label>

			<view class="sm-font">
				<u-icon name="checkmark-circle" color="#347caf" size="28"></u-icon>
				<span>
					注册即表示阅读并同意
					<text class="link-color" @click="openAgreement">《用户协议》</text>
					和
					<text class="link-color" @click="openPrivacy">《隐私条款》</text>
				</span>
			</view>

			<button @tap="submit" class="getCaptcha">确认提交</button>
		</view>
		<!-- <wx-share :title='shop.name' :desc="shop.store_introduction" :imgUrl="shop.cover" link="/" ref="wxs"></wx-share> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			name: '',
			mobile: '',
			sms_code: '',
			shop: {},
			sending: false
		};
	},
	onShow() {
		let routes = getCurrentPages();
		let curRoute = routes[routes.length - 1].route;
		let curParam = routes[routes.length - 1].options;
		let fromURL = window.location.protocol + '//' + window.location.host + '/#/';
		if (curParam && curParam.redirect && curParam.redirect != '/pages/login/index') {
			fromURL += curParam.redirect;
		}
		let en = window.navigator.userAgent.toLowerCase();
		// if (en.match(/MicroMessenger/i) == 'micromessenger') {
		// 	// 微信中，自动跳转微信授权登陆
		// 	window.location.href = 'https://chenxiang.mafutech.com.cn/api/h5-api/login/wechat-auth?login_key=' + uni.getStorageSync(
		// 		'token') + '&from_url=' + encodeURIComponent(fromURL);
		// } else {
		// 	console.log('not wechat')
		// 	// 停留在登陆页面，用户输入账号密码或短信验证登陆

		// }
	},
	onLoad() {
		this.getShop();
	},
	methods: {
		openAgreement() {
			if (this.shop.user_agreement_id) {
				return this.openPage('/pages/article/detail', { id: this.shop.user_agreement_id });
			}
			this.openPage('/pages/ucp/index');
		},
		openPrivacy() {
			if (this.shop.privacy_article_id) {
				return this.openPage('/pages/article/detail', { id: this.shop.privacy_article_id });
			}
			this.openPage('/pages/ucp/index');
		},
		getSmsCode() {
			if (this.sending) {
				return;
			}
			if (!this.mobile) {
				return uni.showToast({
					title: '请填写手机号',
					icon: 'error'
				});
			}
			this.sending = true;
			var timer = setTimeout(function () {
				this.sending = false;
			}, 60000);
			this.$u
				.post('/sms/send-code', { mobile: this.mobile })
				.then((res) => {
					console.log(res);
					return uni.showToast({
						title: '短信已发送',
						icon: 'success'
					});
				})
				.catch((e) => {
					console.log(e);
					clearTimeout(timer);
					this.sending = false;
				});
		},
		submit() {
			if (!this.name) {
				return uni.showToast({
					title: '请填写会员姓名',
					icon: 'error'
				});
			}
			if (!this.mobile) {
				return uni.showToast({
					title: '请填写手机号',
					icon: 'error'
				});
			}
			if (!this.sms_code) {
				return uni.showToast({
					title: '请填写短信验证码',
					icon: 'error'
				});
			}
			this.$u
				.post('/sms/registration', { mobile: this.mobile, verify_code: this.sms_code, name: this.name, action: 'registration' })
				.then((res) => {
					let fromURL = window.location.protocol + '//' + window.location.host + '/#/';
					location.href = fromURL;
				})
				.catch((e) => {});
		},
		openPage(jumpURL, params = {}) {
			this.$u.route({
				type: 'to',
				params: params,
				url: jumpURL,
				animationType: 'slide-in-bottom'
			});
		},
		getShop() {
			this.$u
				.post('/shopping/shop-setting', {})
				.then((res) => {
					this.shop = res;
				})
				.catch((e) => {});
		}
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	font-size: 28rpx;

	.content {
		// width: 600rpx;
		margin: 80rpx 60rpx;
		.logo {
			margin-bottom: 50rpx;
			text-align: center;
			img {
				max-width: 100%;
			}
		}

		.title {
			text-align: left;
			font-size: 48rpx;
			font-weight: 500;
			margin-bottom: 50rpx;
			img {
				max-width: 80%;
			}
		}

		label {
			display: flex;
			// border-bottom: 1px solid #dbdbdb;
			margin-bottom: 18rpx;
			padding: 18rpx 0;
		}

		input {
			text-align: left;
			// margin-bottom: 10rpx;
			// padding-bottom: 6rpx;
		}

		input[short] {
			width: 4em;
		}

		.tips {
			// color: $u-type-info;
			// margin-bottom: 44rpx;
			// margin-top: 18rpx;
			color: #347caf;
			width: 7em;
		}
		.link-color {
			color: #347caf;
		}

		.getCaptcha {
			background-color: #347caf;
			color: $u-tips-color;
			color: #fff;
			border: none;
			font-size: 30rpx;
			padding: 12rpx 0;
			border-radius: 60rpx;

			&::after {
				border: none;
			}
		}

		.alternative {
			color: $u-tips-color;
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
		}

		.u-border-bottom::after {
			border-color: #9d9ea0;
		}

		uni-input {
			// padding-bottom:20rpx;
		}
		.sm-font {
			font-size: 0.9em;
			margin-bottom: 1em;
			line-height: 1.8;
		}
		.login-box {
			text-align: right;
			padding: 40rpx 0 50rpx 0;
		}
		.select-icon {
			height: 28rpx;
			display: inline-block;
			margin-right: 0.5em;
		}
	}

	.buttom {
		.loginType {
			display: flex;
			padding: 350rpx 150rpx 150rpx 150rpx;
			justify-content: space-between;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: $u-content-color;
				font-size: 28rpx;
			}
		}

		.hint {
			padding: 20rpx 40rpx;
			font-size: 20rpx;
			color: $u-tips-color;

			.link {
				color: $u-type-warning;
			}
		}
	}
	.login-button {
		color: rgb(255, 255, 255);
		background-color: #fd430d;
	}
}
</style>
